<!-- 表格公用组件 -->
<template>
  <t-space direction="vertical">
    <slot name="header"></slot>
    <t-table
      v-bind="tableOptions.config"
      :data="tableOptions.data"
      :columns="tableOptions.columns"
      :pagination="tableOptions.pagination"
      @sort-change="onSortChange"
      @change="onChange"
      @filter-change="onFilterChange"
      @select-change="rehandleSelectChange"
      :filterRow="() => null"
    >
      <template v-for="item in tableOptions.columns" v-slot:[item.colKey]="scope">
        <slot :name="item.colKey" :row="scope.row" :columns="scope.columns">{{ scope.row[item.colKey] }}</slot>
      </template>
      <template v-if="tableOptions.config?.expandSlot" v-slot:expandedRow="scope">
        <slot name="expandedRow" :row="scope.row" :columns="scope.columns"></slot>
      </template>
    </t-table>
  </t-space>
</template>

<script>
export default {
  props: {
    tableOptions: {
      type: Object,
      default() {
        return {
          data: [],
          columns: [],
          pagination: {
            defaultCurrent: 1,
            defaultPageSize: 10,
            total: 0,
          },
          config: {},
        };
      },
    },
    showHeader: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    // 排序、分页、过滤等发生变化时会出发 change 事件
    onChange(info, context) {
      this.$emit('onChange', info, context);
    },
    // 排序
    onSortChange(sort) {
      this.$emit('onSortChange', sort);
    },
    // 过滤
    onFilterChange(filters) {
      this.$emit('onFilterChange', filters);
    },
    // 选中数据
    rehandleSelectChange(value, { selectedRowData }) {
      this.$emit('rehandleSelectChange', value, selectedRowData);
    },
  },
};
</script>
